<template>
    <div class="mainapp">
            <div id="formdemo01">
       
     <el-form  :model="formInline" >
          <el-row :gutter="12">
              <el-col :span="5">
         <el-form-item label="姓名:">
    <el-input class="input1" v-model="formInline.name"></el-input>
  </el-form-item>
  </el-col>
   <el-col :span="5">
  <el-form-item label="身份证号:">
    <el-input v-model="formInline.card" ></el-input>
  </el-form-item>
  </el-col>
   <el-col :span="5">
  <el-form-item label="年龄:">
    <el-input v-model="formInline.age" ></el-input>
  </el-form-item>
   
  </el-col>
  <el-col :span="5">
  <el-form-item label="科室:">
    <el-input v-model="formInline.departmentname" ></el-input>
  </el-form-item>
  </el-col>
  
  
     

  
   <el-col  :span="5">
  <el-form-item label="医生:">
    <el-input v-model="formInline.doctorname" ></el-input>
  </el-form-item>
   </el-col>
   <el-col :span="5">
   <el-form-item label="电话:">
    <el-input v-model="formInline.telephone" ></el-input>
  </el-form-item>
   </el-col>
   <el-col :span="5">
   <el-form-item label="挂号费:">
    <el-input v-model="formInline.cost" ></el-input>
  </el-form-item>
   </el-col>
   <el-col :span="5">
   <el-form-item label="审批人">
    <el-input v-model="formInline.user" placeholder="审批人"></el-input>
  </el-form-item>
   </el-col>
   <el-row  :gutter="20">
         <el-col :span="12" :offset="8">
            
        <el-button type="primary" icon="el-icon-check" @click="huajiaDialogVisible = true">开始划价</el-button> 
             </el-col>
            </el-row>
      </el-row>
   </el-form>
 </div>  
 <div>
<el-dialog  width="1200px" title="选择病人" :visible.sync="huajiaDialogVisible">
     
     <div class="shousuo">
      <el-input  v-model="sou" placeholder="请输入搜索内容" style="width:240px;margin-bottom: 40px;"></el-input>
      <el-button style="margin-left: 20px;" icon="el-icon-search" circle></el-button>
    </div>


   <el-table
    :data="tableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
    border
    >
  

    <el-table-column
      prop="id"
      label="单据号"
      width="100">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="100">
    </el-table-column>
    <el-table-column
      prop="telephone"
       width="180"
      label="电话">
    </el-table-column>
    <el-table-column
     width="180"
      prop="card"
      label="身份证号">
    </el-table-column>
    <el-table-column
      prop="age"
      label="年龄">
    </el-table-column>
    <el-table-column
     width="130"
      prop="departmentname"
      label="科室">
    </el-table-column>
    <el-table-column
      prop="doctorname"
      label="医生">
    </el-table-column>
    <el-table-column
      prop="type"
      label="挂号类别">
    </el-table-column>
    <el-table-column
      prop="date"
      label="挂号时间">
    </el-table-column>
    <el-table-column
      prop="cost"
      label="挂号费">
    </el-table-column>
   
     <el-table-column
      fixed="right"
      label="操作"
      width="100">
      <template slot-scope="scope">
        <el-button @click="xzhandleClick(scope.row)" type="primary" size="small">选择</el-button>
        
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[2,4,6,10]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.length">
    </el-pagination>

</el-dialog>

 </div>
<el-row :gutter="10">
  <div class="xiangmuTable"   v-if="xmisshow">
      <el-col :span="10">
    <div class="xztable">
     <div class="xmsousuo">
      <el-input  v-model="sou" placeholder="请输入搜索内容" style="width:240px;margin-bottom: -10px;"></el-input>
      <el-button style="margin-left: 20px;" icon="el-icon-search" circle></el-button>
    </div>

   <el-table
    :data="xiangmuzs.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
    border
    style="width: 500px"
    :header-cell-style="{background:'gainsboro', color:'#000'}"
    >
   <el-table-column
      prop="name"
      label="项目名称"
      >
    </el-table-column>
    <el-table-column
      prop="company"
      label="单位"
     >
    </el-table-column>
    <el-table-column
      prop="cost"
      
      label="单价">
    </el-table-column>

     <el-table-column
      fixed="right"
      label="操作"
     >
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="primary" size="mini">选择</el-button>
        
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[2,4,6,10]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.length">
    </el-pagination>
 </div>
</el-col>
<div>
    <el-dialog title="选择次数" :visible.sync="xzDialogVisible">
  <el-form :model="formby">
    <el-form-item >
    <el-input :rows="2" v-model="shuliang"></el-input>
  </el-form-item>
    <el-form-item>
    <el-button type="primary" @click="tijiaoxz">提交</el-button>
    <el-button>取消</el-button>
  </el-form-item>
  </el-form>  
  </el-dialog>   
</div>  
 <el-col :span="10">
  <div class="xiangmusctable">
   <el-table
    :data="xiangmu.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
    border
    style="width: 500px"
    :header-cell-style="{background:'gainsboro', color:'#000'}"
    >

   <el-table-column
      prop="name"
      label="项目名称"
      >
    </el-table-column>
    <el-table-column
      prop="cishu"
      label="数量"
     >
    </el-table-column>
    <el-table-column
      prop="cost"
      
      label="单价">
    </el-table-column>
    <el-table-column
    
      prop="total"
      label="小计">
    </el-table-column>
     <el-table-column
    
      prop="sfjiancha"
      label="受否检查">
    </el-table-column>
     <el-table-column
      fixed="right"
      label="操作"
     >
      <template slot-scope="scope">
        <el-button @click="deletexm(scope.row)" type="primary" size="mini">删除</el-button>
        
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[2,4,6,10]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="xiangmu.length">
    </el-pagination>

      </div>
    </el-col>

 </div>
</el-row>
    </div>
</template>
<script>

import { ghlist,chaxunid} from "../../api/Department";
import { getList,addxm} from "../../api/Projecttable";
import { addxiangm,getgoumai} from "../../api/Listofnoninpatientitems";
export default {
    data(){
        return{
          shuliang:1,
            xmTableVisible:false,
            huajiaDialogVisible:false,
            xmisshow:false,
            sou:'',
            pagesize:2,
            currentPage:1,
            xzDialogVisible:false,
            zongji:1,
            userid:'1',
            sfjiancha:'非检查',
         formInline: {
        name:"",
        card:"",
        age:"",
        departmentname:"",
        doctorname:"",
        telephone:"",
         cost: "",
        region: "",
      },  
      xiangmuzs:[{
          id:'',
          name:'',
          company:'',
          cost:'',
      }
      ],  
      xiangmu:[{
        name:'',
        cost:'',
        cishu:'',
        total:'',
        sfjiancha:'',
      }],
         tableData: [
        {
        id:'',
        name: "",
        age:'',
        telephone: "",
        card: "",        
        type:'',
        doctorname:'',
        departmentname:'',
        date:'',
        cost:'',
        }
        
      ],
    }
    },
     mounted(){
      this.chaxunguahao();
      this.xiangmulist()
     
    },
    methods:{
      tijiaoxz(){
          this.xzDialogVisible=false;
            this.zongji=this.shuliang*this.xiangmuzs.cost;
            
            console.log(this.sfjiancha)
             addxiangm({patientId:this.userid,projectid:this.xiangmuzs.id,cishu:this.shuliang,total:this.zongji,sfjiancha:this.sfjiancha}).then(res=>{
         console.log("nice")                                      
       }).then(()=>{
       getgoumai({patientId:this.userid}).then(res=>{
           this.xiangmu=res.result
       })
       })
     

       
      },
      deletexm(){

      },
        handleSizeChange(pagesize) {
       this.pagesize=pagesize;
      },

      handleCurrentChange(currentPage) {
        this.currentPage=currentPage;
      },
      xzhandleClick(row){
        this.huajiaDialogVisible=false;
          this.xmisshow=true
          this.formInline=row
         
      },
      handleClick(row){
        this.xiangmuzs.cost=row.cost
        this.xiangmuzs.id=row.id
        
      this.xzDialogVisible=true
       chaxunid({name:this.formInline.name}).then(res=>{  
       console.log( res)
      this.userid=res.result[0].id
      console.log( "id"+this.userid)
      })
      },
       chaxunguahao(){
          ghlist().then(res=>{
           
            this.tableData=res.result
          })
       },
       xiangmulist(){
         getList().then(res=>{
           console.log(res)
           this.xiangmuzs=res.result
         })
       }
    }
}
</script>
<style  scoped>
.mainapp{
  min-width: 700px;
  max-width: 2000px;
}
#formdemo01 {
  margin-top: 30px;
  margin-left: 150px;
  
}
.xiangmuTable {

  margin-top: 40px;
  margin-left:110px;
  width: 1600px;
  height: 300px;
  min-width: 700px;
  max-width: 1600px;
  padding-right: 400px;
}
.xztable {
 
  
  
  width: 500px;
 
      
}
.xiangmusctable {
  
 
  margin-left: 50px;
  width: 500px;
  
  
 
}
.xmsousuo{

  background-color: gainsboro;
}
</style>
